<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="btn1">点击我显示</button>
    <button class="btn2">点击我隐藏</button>
    <script>
        // 一、统计类被实例化的次数
        // 全局定义一个变量 记录实例化的次数
        // let num = 0;
        // class Person{
        //     static num = 0;
        //     constructor(name,age){
        //         this.name = name;
        //         this.age = age;
        //         // this.num = 0;
        //         // num++;
        //         Person.num++; // 把静态成员 加加
        //     }
        // }

        // let zhangsan = new Person("张三",20);
        // let lisi = new Person("李四",21);
        // // console.log(num);
        // console.log(Person.num);



        // 二、实现一个单例模式 （单体模式）
        // 保证一个类 只有一个实例 ；
        // 1. 通过 全局变量 保持实例化对象 ，一旦被实例化了 ，那么就保持这个实例，以后实例化的时候 返还保持的实例
        // let instance;
        // class Person{
        //     constructor(name,age){
        //         this.name = name;
        //         this.age = age;
        //         if(!instance){
        //             // 第一实例化 就把第一次实例化的对象保存起来
        //             instance = this;
        //             console.log("第一次");
        //         }else {
        //             // 后面的实例化 都会进入else 判断
        //             // console.log("else里")
        //             return instance;
        //         }
        //     }
        // }

        // let zhangsan = new Person("张三",20);
        // let lisi = new Person("李四",21);
        // let wangwu = new Person("王五",21);
        // console.log(zhangsan,lisi,wangwu);


        // 2. 通过静态属性记录 实例化对象；

        // let instance;
        // class Person{
        //     static instance;  // 记录被实例化的实例
        //     constructor(name,age){
        //         this.name = name;
        //         this.age = age;
        //         if(!Person.instance){
        //             // 第一实例化 就把第一次实例化的对象保存起来
        //             Person.instance = this;
        //             console.log("第一次");
        //         }else {
        //             // 后面的实例化 都会进入else 判断
        //             // console.log("else里")
        //             return Person.instance;
        //         }
        //     }
        // }

        // let zhangsan = new Person("张三",20);
        // let lisi = new Person("李四",21);
        // let wangwu = new Person("王五",21);
        // console.log(zhangsan,lisi,wangwu);



        // 全局范围内只能有一个弹框；

        class Dailog{
            static instance;
            constructor(){
                this.ele = document.createElement("p");
                this.ele.innerHTML = "我是一个弹框，全局只能有一个";
                document.body.appendChild(this.ele);
                this.hideDailog();
                if(!Dailog.instance){  // 让弹框的实例只有一个 ；操作只能操作一个弹框；
                    Dailog.instance = this;
                }else{
                    return Dailog.instance;
                }
            }
            showDailog(){
                this.ele.style.display = "block";
            }
            hideDailog(){
                this.ele.style.display = "none";
            }
        }

        let dailog1 = new Dailog();
        let dailog2 = new Dailog();
        document.querySelector(".btn1").onclick = function(){
            dailog1.showDailog();
            dailog2.showDailog();
        }
        document.querySelector(".btn2").onclick = function(){
            dailog1.hideDailog();
            dailog2.hideDailog();
        }
        


    </script>
</body>
</html>